<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Vue的框架-->
    <script src="../../js/vue/vue.js"></script>
    <script src="../../js/jpuery/jquery.js"></script>

</head>
<body>
<!--html的内容-->
<!--vue的配置模板，在模板里面配置对应的指令渲染数据-->
<div id="app">
       <!--绑定事件：v-on 比如 v-on：click 绑定事件-->
       <!--绑定事件：v-on 缩写 @click-->
    <button v-on:click="fun1($event)">点我试试</button>
    <button @click="fun2()">点我试试ok</button>
    <ul>

        <li v-for="emp in emps">{{emp.id}}-{{emp.name}}-{{emp.age}}-{{emp.sex == 1 ? '男' : '女'}}</li>
        <!-- |sexFilter 相当于sexFilter（emp.sex）-->
        <li v-for="emp in emps">{{emp.id}}-{{emp.name}}-{{emp.age}}-{{emp.sex|sexFilter}}</li>
    </ul>
</div>
<script>
    /*创建一个vue的对象实例*/
    var vue = new Vue({
        //传入一个配置对象的参数
        el: '#app',//配置对应的模板信息
        data: {     //设置对应的数据变量
        emps:[
            {id:1,name:"小巫",age:4,sex:1},
            {id:2,name:"大巫",age:4,sex:0},
            {id:3,name:"小大巫",age:4,sex:1}
        ]
        },
        /*添加函数*/
        methods:{
            //在响应函数获取事件对象
            fun1:function (event) {
                alert(111111)
                //获取事件类型
                console.log(event.type);
                //获取事件源
                console.log(event.currentTarget);
            },
            fun2:function () {
                alert(222222)
            }
        },
        /*filter过滤格式显示*/
        filters:{
            sexFilter:function (sex) {
                if (sex == 1){
                    return '男';
                }else {
                    return '女';
                }
            }
        },
        /*mounted 是一个函数*/
        mounted:function () {
            /*页面加载之后执行
            * 主要是用过AJAX获取页面中的数据
            * */
            $().get("/data/emp.json",{},function (data) {
                vue.emps = data;
            })
        }
    })
</script>
</body>
</html>